import React, { useEffect, useState } from 'react'
import { NavBar, Tabs } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { ShareSheet, Tag } from 'react-vant'
import { Search, Badge, Toast } from 'react-vant';
import { ShoppingCartO } from '@react-vant/icons';
import styles from './index.module.css'
import { SendOutline } from 'antd-mobile-icons'
import http from '../../utils/http'
import { UnorderedListOutline } from 'antd-mobile-icons'
import { addCart } from '../../store/cartSlice'
import { useAppDispatch, useAppSelector } from '../../store/store'
const Index: React.FC = () => {
  const navigate = useNavigate()
  const dispath = useAppDispatch()
  const [visible, setVisible] = useState(false)
  const { cartlist } = useAppSelector(state => state.cartSlice)
  const [value, setValue] = useState('');
  const [taglist] = useState(['高血压', '高血脂', '中风偏瘫', '冠心病及心绞痛', '心律不齐'])
  const [pageCode, setpageCode] = useState(1)
  const [pageSize] = useState(10)
  const [selectedtab, setSelectedtab] = useState<string>('')
  const [tablist, setTabslist] = useState([])
  const [list, setlist] = useState([])
  const options = [
    { name: '微信', icon: 'wechat' },
    { name: '朋友圈', icon: 'wechat-moments' },
    { name: 'QQ', icon: 'qq' },
  ]
  // 搜索
  const sousuo = (value: string) => {
    setpageCode(1)
    getlist(value)
  }
  // tabs的数据
  const tabslist = () => {
    http.get('/restorative/type').then((result) => {
      const { code, data } = result.data
      if (code === 200) {
        setTabslist(data)
      }
    })
  }
  const getlist = (searchValue: string = '') => {
    http.get('/restorative/list', {
      params: {
        pageCode: pageCode,
        pageSize: pageSize,
        state: selectedtab,
        search: searchValue
      }
    }).then((result) => {
      const { code, data } = result.data
      if (code === 200) {
        setlist(data)
      }
    })
  }
  useEffect(() => {
    tabslist()
    getlist()
  }, [selectedtab])
  // 加入购物车
  const handAdd = (item: any) => {
    dispath(addCart(item))
    Toast.info('添加成功')
  }
  // 商品详情页面
  const handDetail = (item:any)=>{
    navigate(`/buymedicineDetail/${item.restorativesid}`)
  }
  return (
    <div>
      <div style={{ position: 'sticky', top: 0, zIndex: 999999 }}>
        <NavBar onBack={() => navigate('/')} style={{ background: '#fff', }} right={<SendOutline onClick={() => setVisible(true)} fontSize={'25px'} />}>线上药房</NavBar>
      </div>

      {/* 分享面板 */}
      <ShareSheet
        visible={visible}
        options={options}
        title='立即分享给好友'
        onCancel={() => setVisible(false)}
        onSelect={() => {
          setVisible(false)
        }}
      />
      {/* 搜索 */}
      <div style={{ background: '#fff', height: '4rem', display: 'flex' }}>
        <Search
          showAction
          shape="round"
          style={{ width: '90%' }}
          value={value}
          actionText={<div className={styles.sousuo} onClick={() => sousuo(value)}>搜索</div>}
          onChange={setValue}
          placeholder="搜索药品"
        />
        <Badge content={cartlist.length} style={{ marginTop: '20px' }} >
          <ShoppingCartO fontSize={'1.5rem'} onClick={() => navigate('/BuymedicineCart')} />
        </Badge>
      </div>
      <div>
        <div className={styles.customHeader}>
          <Tabs className={styles.tabs} onChange={() => setSelectedtab(tablist[0]?.restorativesstatename)}>
            {tablist.map((item: any) => {
              return <Tabs.Tab key={item.restorativesstateid} title={item.restorativesstatename} />
            })}
          </Tabs>
          <UnorderedListOutline className={styles.moreIcon} />
        </div>
      </div>
      <div style={{ marginLeft: '15px' }}>
        {taglist.map((item: any, index: number) => {
          return <Tag round key={index} color="#ccc" textColor='#000' size="medium" style={{ marginRight: '10px', marginBottom: '10px' }}>
            {item}
          </Tag>
        })}
      </div>
      <div>
        {
          list.map((item: any, index: number) => {
            return (
              <div key={index}>
                <div style={{ display: 'flex' }} className={styles.list}>
                  <img src={item.restorativesimage} style={{ width: '40%', height: '150px', borderRadius: '12px', position: 'relative' }} alt=""  onClick={()=>handDetail(item)}/>
                  <div style={{ marginLeft: '10px' }}>
                    <h4>{item.restorativesname}</h4>
                    <p style={{ fontWeight: 'bold', color: 'orangered', marginTop: '70px' }}>￥{item.restorativesprice}</p>
                  </div>
                  <ShoppingCartO
                    fontSize={'20px'}
                    style={{
                      background: '#169bf3',
                      color: '#fff',
                      borderRadius: '50%',
                      padding: '5px',
                      position: 'absolute',
                      right: '25px',
                      marginTop: '80px',
                    }}
                    aria-hidden="false"  // 改为 "false" 或移除
                    onClick={() => { handAdd(item) }}
                  />
                </div>
              </div>
            )
          })
        }
      </div>
    </div>
  )
}

export default Index